import React, { useState, useEffect } from "react";
import { View, Text, Image, Button } from "@tarojs/components";

import Label from "@cmp/label/index.jsx";
import api from "@api/api.js";

export default (props) => {
  const [planInfo, setPlanInfo] = useState({}); // 手术信息
  useEffect(() => {
    props.planInfo && setPlanInfo(props.planInfo);
  }, [props.planInfo, props.type]);

  return (
    <>
      {props.type == "patient" && (
        <View className="listBox">
          <View className="doctor borderBottom myButton">
            <Image src={api.bseUrl + planInfo.dentist?.headimgurl} />
            <View className="name fontBold">
              {planInfo.dentist?.name}
              <View className="font">{planInfo.dentist?.position}</View>
            </View>
            <Button className="send font" openType="share">
              发送方案给医生
            </Button>
          </View>
        </View>
      )}
      {planInfo.surgicalSchemesList &&
        planInfo.surgicalSchemesList.map((item, index) => {
          return (
            <View className="information listBox">
              {/* 手术 */}
              <View className="operation borderBottom">
                <View className="fontBold">{item.surgicalName}</View>
                <View className="operationList">
                  <Label
                    keyName="surgicalMaterialsId"
                    value="materialsName"
                    list={item.surgicalMaterialsList}
                  />
                </View>
              </View>
              {/* 就诊次数 */}
              <View className="operation borderBottom">
                <View className="fontBold">
                  预计就诊次数
                  <View className="font num">{item.numberOfDiag}次</View>
                </View>
              </View>
              {/* 相似案例 */}
              <View className="plan borderBottom">
                <View className="label">
                  <View className="fontBold">相似案例</View>
                </View>
                <View className="at-row at-row__justify--between borderBottom">
                  <View className="at-col at-col-5">
                    <View className="font">术前</View>
                    <View className="planImg">
                      {item.caseData &&
                        item.caseData.afterImg.map((item) => {
                          return <Image src={api.bseUrl + item.path} />;
                        })}
                    </View>
                  </View>
                  <View className="at-col at-col-5">
                    <View className="font">术后</View>
                    <View className="planImg">
                      {item.caseData &&
                        item.caseData.beforeImg.map((item) => {
                          return <Image src={api.bseUrl + item.path} />;
                        })}
                    </View>
                  </View>
                </View>
              </View>
              {/* 备注 */}
              <View className="operation remarks">
                <View className="fontBold">备注</View>
                <View className="font">{item.remarks}</View>
              </View>
            </View>
          );
        })}
    </>
  );
};
